body.crtmode .customBackground {
  background: radial-gradient(
    ellipse,
    var(--crt-bg-color-shine) 0%,
    var(--bg-color) 90%
  );
}

body.crtmode::after {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 999999999;
  background-image: repeating-linear-gradient(
    0deg,
    var(--crt-bg-color-stripe) 0px,
    var(--crt-bg-color-stripe) 1px,
    transparent 2px,
    transparent 5px
  );
  background-size: 50% 5px;
  opacity: 0.3;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

body.crtmode #scanline {
  width: 100%;
  height: 100px;
  z-index: 1001;
  position: absolute;
  bottom: 100%;
  opacity: 0.1;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    var(--crt-bg-color-shine) 10%,
    rgba(0, 0, 0, 0.1) 100%
  );
  animation: scanline 10s linear infinite;
}

body.crtmode header,
body.crtmode main,
body.crtmode footer,
body.crtmode #result,
body.crtmode #popups,
body.crtmode #notificationCenter,
body.crtmode #words .word.error,
body.crtmode #words .word .hints hint,
body.crtmode input,
body.crtmode button,
body.crtmode textarea,
body.crtmode #bannerCenter .banner {
  text-shadow: 3px 0 1px color-mix(in srgb, currentColor 20%, transparent),
    -3px 0 color-mix(in srgb, currentColor 30%, transparent), 0 0 3px;
}

body.crtmode #testConfig,
body.crtmode #testModesNotice {
  text-shadow: none;
}

body.crtmode #testConfig .textButton,
body.crtmode #testModesNotice .textButton {
  text-shadow: 3px 0 1px var(--crt-sub-color-glow),
    -3px 0 var(--crt-sub-color-glow), 0 0 3px;
}

body.crtmode #testConfig .textButton:hover,
body.crtmode #testModesNotice .textButton:hover {
  text-shadow: 3px 0 1px var(--crt-text-color-glow),
    -3px 0 var(--crt-text-color-glow), 0 0 3px;
}

body.crtmode #testConfig .textButton.active,
body.crtmode #testModesNotice .textButton.active {
  text-shadow: 3px 0 1px var(--crt-main-color-glow),
    -3px 0 var(--crt-main-color-glow), 0 0 3px;
}

body.crtmode #testConfig .row,
body.crtmode #testModesNotice .row {
  box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
    -3px 0 var(--crt-sub-alt-color-glow);
}

body.crtmode #caret {
  box-shadow: 3px 0 1px var(--crt-caret-color-glow),
    -3px 0 var(--crt-caret-color-glow);
}

body.crtmode #paceCaret,
body.crtmode key,
body.crtmode #bannerCenter .banner {
  box-shadow: 3px 0 1px var(--crt-sub-color-glow),
    -3px 0 var(--crt-sub-color-glow);
}

body.crtmode #caret.banana,
body.crtmode #caret.carrot,
body.crtmode #paceCaret.banana,
body.crtmode #paceCaret.carrot {
  box-shadow: none;
}

body.crtmode #logo .icon {
  filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
    drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
}

body.crtmode .avatars,
body.crtmode nav .view-account .avatar,
/* Adding `filter` style to .levelAndBar would make it
the containing block for the absolute positioned .xpBar */
body.crtmode nav .view-account .levelAndBar .level,
body.crtmode nav .view-account .levelAndBar .xpBar,
body.crtmode header.focus #logo .icon {
  filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
    drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
}

body.crtmode nav .accountButtonAndMenu .view-account .xpBar .xpBreakdown {
  backdrop-filter: none;
  background: var(--bg-color);
}

body.crtmode .button,
body.crtmode .scrollToTopButton {
  box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
    -3px 0 var(--crt-sub-alt-color-glow), 0 0 3px var(--crt-sub-alt-color-glow);
}

body.crtmode .button.active,
body.crtmode .scrollToTopButton.active {
  box-shadow: 3px 0 1px var(--crt-main-color-glow),
    -3px 0 var(--crt-main-color-glow), 0 0 3px;
}

body.crtmode .button:hover,
body.crtmode .scrollToTopButton:hover {
  box-shadow: 3px 0 1px var(--crt-text-color-glow),
    -3px 0 var(--crt-text-color-glow), 0 0 3px;
}

body.crtmode #keymap .keymapKey {
  box-shadow: 3px 0 1px var(--crt-sub-color-glow),
    -3px 0 var(--crt-sub-color-glow), 0 0 3px;
}

body.crtmode #keymap .keymapKey.activeKey {
  box-shadow: 3px 0 1px var(--crt-main-color-glow),
    -3px 0 var(--crt-main-color-glow), 0 0 3px;
}
